<template>
    <div class="account-box">
    <div class="form">
      <el-form
        ref="formRef"
        :model="user"
        :rules="rules"
        label-position="right"
        label-width="70px"
        status-icon
      >
        <el-form-item label="手机号" prop="mobile" class="form-item">
          <el-input type="password" v-model="user.mobile"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code" class="form-item">
          <el-input type="code" v-model="user.code"></el-input>
          <span class="code" @click="submit">{{
              time === 0 ? "发送验证码" : `${time}秒后再发送`
            }}</span>
        </el-form-item>
        <el-button size="large" class="subBtn" @click="login"
          >点击登录</el-button
        >
      </el-form>
    </div>
    <div class="action">
      <img
        src="https://qzonestyle.gtimg.cn/qzone/vas/opensns/res/img/Connect_logo_7.png"
        alt=""
      />
      <div class="url">
        <a href="javascript:;">忘记密码</a>
        <a href="javascript:;" @click="$router.push('/register')">免费注册</a>
      </div>
    </div>
  </div>
  <!-- </div> -->
</template>
<script>
import { ValidationObserver, ValidationProvider, extend } from "vee-validate";
import * as rules from "vee-validate/dist/rules";
// import { mapActions, mapState } from "vuex";

// 添加所有的规则
Object.keys(rules).forEach((rule) => {
  extend(rule, rules[rule]);
});

export default {
  name: "LoginFormAccount",
  components: {
    ValidationObserver,
    ValidationProvider,
  },
  data() {
    return {
      isMsgLogin: false,
      user: {
        code: "",
        // password: "",
        // mobile: "",
        mobile: "",
        // isAgree: true,
      },
      time: 0,
      rules:{
        mobile: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
        ],
        code: [
          { required: true, message: "验证码不能为空", trigger: "blur" },
          
        ],
      }
    };
  },
  methods: {
    login() {
      this.$refs.formCom.validate().then((success) => {
        if (!success) {
          return;
        }
        // 登录逻辑...
      });
    },
    submit() {
      // 发送验证码逻辑...
    },
  },
};
</script>
<style lang="less" scoped>
.form-item{
  .code{
  position: absolute;
    top: 0;
    right: 10px;
}
}
</style>
